<template>
    <div class="formgroupclass">
        <div
            v-if="formtitle"
            class="formgrouptitle">
            <div
                v-if="formtitle"
                class="title">{{ formtitle }}
            </div>
            <slot name="titleButton">
            </slot>
        </div>
        <van-form
            class="form-group-body"
            ref="ruleForm"
            @submit="onSubmit"
            @failed="onFailed">
            <van-cell-group
                inset
            >
                <slot
                    v-for="(child,index) in formprop"
                    :key="index"
                    :name="child.id"
                    v-bind:value="ruleformdata[child.id]">
                    <van-field
                        v-if="!child.formtype ||child.formtype==='tel' || child.formtype==='iselinput'"
                        :placeholder="child.placeholder"
                        v-model="ruleformdata[child.id]"
                        input-align="right"
                        :maxlength="child.maxlength"
                        :readonly="child.readonly"
                        :disabled="child.disabled"
                        :name="child.name"
                        :rules="rules[child.id]">
                        <template #label>
                            <span
                                v-if="child.isrequired"
                                class="red">*</span>
                            <span>{{child.label}}</span>
                        </template>
                    </van-field>
                    <!-- 选择框 -->
                    <!-- <div
                        v-if="child.formtype==='iselselect'"
                        :key="index"> -->
                    <van-field
                        v-if="child.formtype==='iselselect'"
                        :prop="child.id"
                        :placeholder="child.placeholder"
                        v-model="ruleformdata[child.id]"
                        input-align="right"
                        readonly
                        is-link
                        @click="showPicker[child.id] = !child.readonly"
                        :key="child.id"
                        :rules="rules[child.id]">
                        <template #label>
                            <span
                                v-if="child.isrequired"
                                class="red">*</span>
                            <span>{{child.label}}</span>
                        </template>
                    </van-field>
                    <select-field
                        v-if="child.formtype==='selectfield'"
                        v-model="ruleformdata[child.id]"
                        :field="child"
                        :rules="rules[child.id]"></select-field>
                    <van-field
                        v-if="child.formtype === 'textarea'"
                        :key="child.id"
                        :prop="child.id"
                        :placeholder="child.placeholder"
                        v-model="ruleformdata[child.id]"
                        type="textarea"
                        label-width="100%"
                        :maxlength="child.maxlength"
                        autosize
                        show-word-limit
                        class="textarea-field"
                        :rules="rules[child.id]">
                        <template #label>
                            <span
                                v-if="child.isrequired"
                                class="red">*</span>
                            <span>{{child.label}}</span>
                        </template>
                    </van-field>
                    <van-popup
                        round
                        v-model:show="showPicker[child.id]"
                        position="bottom"
                        :key="child.id">
                        <van-picker
                            :columns="child.columns"
                            :ref="'picker'+child.id"
                            @confirm="onConfirm"
                            @cancel="showPicker[child.id] = false"
                            :key="child.id">
                        </van-picker>
                    </van-popup>
                    <!-- </div> -->
                    <!-- 多选下拉框 -->
                    <multiple-select-cell
                        v-if="child.formtype==='ismultipleselect'"
                        :key="index"
                        v-model:modelValue="ruleformdata[child.id]"
                        :formProp="child"/>
                </slot>
            </van-cell-group>
        </van-form>
    </div>
</template>

<script>
import { reactive, ref, onBeforeUpdate } from 'vue';
import MultipleSelectCell from '@/components/_common/MultipleSelectCell.vue';
import SelectField from '@/components/_common/SelectField.vue';
export default {
    components: { MultipleSelectCell, SelectField },
    props: {
        // 表单绑定的数据
        modelValue: Object,
        // 表单配置项
        formProp: Array,
        // 表单标题
        formTitle: String,
        // 校验规则
        groupRules: Object,
        // 是否可用
        isDisabled: {
            type: Boolean,
            default: false
        }
    },
    setup (props) {
        const showPicker = reactive({});
        for (var v in props.formProp) {
            if (v.formtype === 'iselselect' || v.formtype === 'ismultipleselect') {
                showPicker[v.id] = false;
            }
        }
        const onSubmit = (values) => {
            console.log('submit', values);
        };
        const onFailed = (errorInfo) => {
            console.log('failed', errorInfo);
        };

        const checked = ref([]);
        const checkboxRefs = ref([]);
        const toggle = (index) => {
            checkboxRefs.value[index].toggle();
        };
        onBeforeUpdate(() => {
            checkboxRefs.value = [];
        });
        return {
            showPicker,
            onSubmit,
            onFailed,
            toggle,
            checked,
            checkboxRefs
        };
    },
    emits: ['update:modelValue'],
    data () {
        return {
            // 表单标题
            formtitle: this.formTitle,
            // 表单校验规则
            rules: { ...this.groupRules },
            // 表单组配置
            formprop: this.formProp
        };
    },
    computed: {
        ruleformdata: {
            get () {
                return this.modelValue;
            },
            set (val) {
                this.$emit('update:modelValue', val);
            }
        }
    },
    methods: {
        // 父组件调用此方法来进行表单的校验提交
        // 校验通过后，通过回调来使用父组件的提交方法
        submitForm (callback) {
            this.$refs.ruleForm.validate().then(() => {
                console.log(this.$st('wp_Verification_passed'));
                callback && callback();
            }).catch(() => {
                console.log(this.$st('wp_Verification_failed'));
                return false;
            });
        },
        onConfirm (value, index) {
            const id = Object.keys(this.showPicker).find(child => this.showPicker[child]);
            this.ruleformdata[id] = value;
            this.showPicker[id] = false;
        },
        validate () {
            return this.$refs.ruleForm.validate();
        }
    }
};
</script>

<style lang="scss">
.formgroupclass {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    .red{
        color: red;
    }
    .van-cell-group--inset{
        margin-left: 0px;
        margin-right: 0px;
    }
    .form-group-body{
        .van-cell{
            font-size: 17px;
            padding-left: 15px;
            .van-cell__value{
                word-break: break-all;
            }
      }
    }
    .van-field{
        padding-left: 15px;
    }
    .formgrouptitle {
        // 表单标题样式
        width: 100%;
        height: 30px;
        font-size: 13px;
        background: #EDEDED;
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        .title {
            //标题样式
            height: 22px;
            color: rgba(0, 0, 0, 0.85);
            padding-left: 15px;
            padding-top: 2px;
            line-height: 22px;
        }
    }
    .van-field__label{
        opacity: 1;
        font-size: 17px;
        font-weight: Normal;
        text-align: left;
        color: #000000;
        margin-right: 0px;
    }
    .van-field__value{
        .van-field__control.van-field__control--right{

            color: #969799 !important;
        }
    }
    ::placeholder{
        color: #969799;
    }
    .textarea-field {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        .van-field__control {
            height: 80px;
        }
    }
}
</style>
